本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。
- 【Day 01】淺入淺出 Rails with Vue - Before We Begin
- 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
- 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
- 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
- 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
- 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
- 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
- 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
- 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
- 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
- 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10
- 【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11
- 【Day 13】淺入淺出 Rails with Vue - Vue 的基本概念 - 12
- 【Day 14】淺入淺出 Rails with Vue - Vue 的基本概念 - 13
- 【Day 15】淺入淺出 Rails with Vue - Vue 的基本概念 - 14
- 【Day 16】淺入淺出 Rails with Vue - Vue 的基本概念 - 15
- 【Day 17】淺入淺出 Rails with Vue - Vue 的基本概念 - 16
- 【Day 18】淺入淺出 Rails with Vue - Vue 的基本概念 - 17
- 【Day 19】淺入淺出 Rails with Vue - Vue 的基本概念 - 18
- 【Day 20】淺入淺出 Rails with Vue - Vue 的基本概念 - 19
- 【Day 21】淺入淺出 Rails with Vue - Vue 的基本概念 - 20
- 【Day 22】淺入淺出 Rails with Vue - Vue 的基本概念 - 21
- 【Day 23】淺入淺出 Rails with Vue - Vue 的基本概念 - 22
- 【Day 24】淺入淺出 Rails with Vue - Vue 的基本概念 - 23
- 【Day 25】淺入淺出 Rails with Vue - Vue 的基本概念 - 24
- 【Day 26】淺入淺出 Rails with Vue - Vue 的基本概念 - 25
- 【Day 27】淺入淺出 Rails with Vue - Vue 的基本概念 - 26
- 【Day 28】淺入淺出 Rails with Vue - Vue 的基本概念 - 27
- 【Day 29】淺入淺出 Rails with Vue - Vue 的基本概念 - 28
.sync Modifier在某些時刻，我們可能需要對 props 進行雙向綁定，但是 two way binding 有可能會導致 maintenance issue，
因為 child component 有可能會直接修改 parent component 的資料，這樣的話，parent component 就不知道，
這也是為什麼 Vue.js 會推薦使用像 update:myPropName 這樣的 emitting event 的方式來達成雙向綁定。
如以下範例，我們使用 update:title event，並傳入 newTitle 這個參數，
this.$emit('update:title', newTitle)
這樣在 parent component 中，我們就可以監聽 update:title 這個 event，並將 newTitle 這個參數，傳入 title 這個 prop 中，
如下，這樣就可以達成雙向綁定的效果。
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
但是這樣的寫法，會讓 parent component 的 template 變得很雜亂，因此 Vue.js 提供了一個 .sync modifier，讓我們可以簡化這個寫法，
<text-document v-bind:title.sync="doc.title"></text-document>
需特別注意的是，當我們使用
v-bind和.syncmodifier 的時候，不支援 expression，也就是說，我們不能寫成v-bind:title.sync="doc['title']"，這樣的寫法會導致錯誤。
當 .sync modifier 後面為 object 的時候，會將 object 的所有 property 都加上 .sync modifier，如下，
<text-document v-bind.sync="doc"></text-document>
將會等同於，
<text-document
v-bind:title.sync="doc.title"
v-bind:author.sync="doc.author"
v-bind:content.sync="doc.content"
></text-document>
特別注意的是，object 也無法被直接使用，也就是說，我們不能寫成
v-bind.sync="{ title: doc.title }"，這樣的寫法會導致錯誤。
第一次參加這種文字版的 "鐵人" 競賽，雖說沒有達成當初的目的，但這個月來，透過每天文章的撰寫，也讓我對 Vue.js 有更深的了解。
要特別感謝 猴子戰隊 所有成員的不離不棄，默默地也一起堅持了 30 天，他們的文章都很棒，也都值得一讀，可以到 猴子戰隊 這裡看看。
iThome鐵人賽
看影片追技術